<template>
	<div id="center">
		<div class="up">
			<div class="bg-color-black item" v-for="item in titleItem" :key="item.title">
				<p class="ml-2 colorBlue fw-b fs-xl" style="font-size: 1.875rem;">{{ item.title }}</p>
				<div>
					<dv-digital-flop class="dv-dig-flop ml-1 mt-2 pl-3" :config="item.number" />
				</div>
			</div>
		</div>
		<!-- <div class="down"> -->
		<!-- <div class="ranking bg-color-black">
        <span>
          <icon name="chart-pie" class="text-icon"></icon>
        </span>
        <span class="fs-xl text mx-2 mb-1 pl-3">年度负责人组件达标榜</span>
        <dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" />
      </div> -->
		<!-- <div class="percent">
        <div class="item bg-color-black">
          <span>今日任务通过率</span>
          <CenterChart
            :id="rate[0].id"
            :tips="rate[0].tips"
            :colorObj="rate[0].colorData"
          />
        </div>
        <div class="item bg-color-black">
          <span>今日任务达标率</span>
          <CenterChart
            :id="rate[1].id"
            :tips="rate[1].tips"
            :colorObj="rate[1].colorData"
          />
        </div>
        <div class="water">
          <dv-water-level-pond class="dv-wa-le-po" :config="water" />
        </div>
      </div> -->
		<!-- </div> -->
	</div>
</template>

<script>
	// import CenterChart from '@/components/echart/center/centerChartRate'

	export default {
		data() {
			return {
				titleItem: [{
						title: '今年累计任务建次数',
						number: {
							number: [120],
							toFixed: 1,
							// textAlign: 'center',
							content: '{nt}',
							style: {
								fontSize: 35
							}
						}
					},
					{
						title: '本月累计任务次数',
						number: {
							number: [18],
							toFixed: 1,
							// textAlign: 'left',
							content: '{nt}',
							style: {
								fontSize: 26
							}
						}
					},
					{
						title: '今日累计任务次数',
						number: {
							number: [2],
							toFixed: 1,
							// textAlign: 'left',
							content: '{nt}',
							style: {
								fontSize: 26
							}
						}
					},
					{
						title: '今年失败任务次数',
						number: {
							number: [14],
							toFixed: 1,
							textAlign: 'left',
							content: '{nt}',
							style: {
								fontSize: 26
							}
						}
					},
					{
						title: '今年成功任务次数',
						number: {
							number: [106],
							toFixed: 1,
							textAlign: 'left',
							content: '{nt}',
							style: {
								fontSize: 26
							}
						}
					},
					{
						title: '今年达标任务个数',
						number: {
							number: [100],
							toFixed: 1,
							textAlign: 'left',
							content: '{nt}',
							style: {
								fontSize: 26
							}
						}
					}
				],
				ranking: {
					data: [{
							name: '周口',
							value: 55
						},
						{
							name: '南阳',
							value: 120
						},
						{
							name: '西峡',
							value: 78
						},
						{
							name: '驻马店',
							value: 66
						},
						{
							name: '新乡',
							value: 80
						},
						{
							name: '新乡2',
							value: 80
						},
						{
							name: '新乡3',
							value: 80
						},
						{
							name: '新乡4',
							value: 80
						},
						{
							name: '新乡5',
							value: 80
						},
						{
							name: '新乡6',
							value: 80
						}
					],
					carousel: 'single',
					unit: '人'
				},
				water: {
					data: [24, 45],
					shape: 'roundRect',
					formatter: '{value}%',
					waveNum: 3
				},
				// 通过率和达标率的组件复用数据
				rate: [{
						id: 'centerRate1',
						tips: 60,
						colorData: {
							textStyle: '#3fc0fb',
							series: {
								color: ['#00bcd44a', 'transparent'],
								dataColor: {
									normal: '#03a9f4',
									shadowColor: '#97e2f5'
								}
							}
						}
					},
					{
						id: 'centerRate2',
						tips: 40,
						colorData: {
							textStyle: '#67e0e3',
							series: {
								color: ['#faf3a378', 'transparent'],
								dataColor: {
									normal: '#ff9800',
									shadowColor: '#fcebad'
								}
							}
						}
					}
				]
			}
		},
		// components: {
		//   CenterChart
		// }
		mounted() {
			this.getStatistics()
		},

		methods: {
			getStatistics() {
				this.$http.get("/view/weather_statistics/list").then((res) => {
					console.log("=======>/view/weather_statistics", res.data.rows)
					let statistics = res.data.rows
					// this.titleItem.number.number = 
					let statistic = []
					// // 循环遍历数组，取出数据，转成和data一样的格式
					for (var i = 0; i < statistics.length; i++) {
					let x = []
					x.push(statistics[i].totalWeather)
					let	d = {
								title: '',
								number: {
									number: [],
									toFixed: 0,
									textAlign: 'center',
									content: '{nt}',
									style: {
										fontSize: 35
									}
								}
							}
					d.number.number = x
					d.title = statistics[i].weather
					// 	d.name = books[i].name
					// 	d.value = books[i].value
					// 	// 往data数组中添加数据
					statistic.push(d)
					}
					console.log("======>statisticsdata", statistic)
					this.titleItem = statistic
					// this.Draw()
				}).catch((err) => {
					console.log(err)
					alert('请求失败！请检查后端接口！！！！')
				})
			},
		}

	}
</script>

<style lang="scss" scoped>
	#center {
		display: flex;
		flex-direction: column;

		.up {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;

			.item {
				border-radius: 6px;
				padding-top: 8px;
				margin-top: 8px;
				width: 48%;
				// height: 70px;
				height: 8rem;

				.dv-dig-flop {
					width: 150px;
					height: 30px;
				}
			}
		}

		.down {
			padding: 6px 4px;
			padding-bottom: 0;
			width: 100%;
			display: flex;
			height: 255px;
			justify-content: space-between;

			.bg-color-black {
				border-radius: 5px;
			}

			.ranking {
				padding: 10px;
				width: 59%;

				.dv-scr-rank-board {
					height: 225px;
				}
			}

			.percent {
				width: 40%;
				display: flex;
				flex-wrap: wrap;

				.item {
					width: 50%;
					height: 120px;

					span {
						margin-top: 8px;
						font-size: 14px;
						display: flex;
						justify-content: center;
					}
				}

				.water {
					width: 100%;

					.dv-wa-le-po {
						height: 120px;
					}
				}
			}
		}
	}
</style>
